<template>
    <div class="" v-loading="loading">
        <div class="food-information" style="margin: 0 13% 2%;">
            <el-container class="detail-container-with">
                <div style="margin:10px -40px 0 0">
                  <div class="attract-title">美食详情</div>
                  <div class="attract-title2">SELECT YOUR FAVORITE FOOD</div>
                    <el-card>
                        <div class="detail-content-container">
                            <div class="goods-info clearfix">
                                <div class="gallery-list">
                                    <e-xiangqingxinxi :images="map.photo"></e-xiangqingxinxi>
                                </div>
                                <div class="goods-right-content">
                                  <h3 class="content-title">
                                    <span class="content-name">{{ map.name }}</span>
                                    <el-tag class="category-tag" type="info">
                                      <e-select-view module="foodkind" :value="map.kind" select="id" show="name"></e-select-view>
                                    </el-tag>
                                  </h3>
                                    <div class="content-details">
                                      <div class="goods-content" v-html="map.introduction"></div>
                                      <div class="detail-item">
                                        <span class="detail-value1">￥{{ map.price }}</span>
                                      </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>

            </el-container>
        </div>
    </div>
</template>
<style type="text/scss" scoped lang="scss">
.food-information{
  .detail-content-container {
    position: relative;
    line-height: 1.8;
    letter-spacing: 0.1em;
    margin-top: -35px;
    margin-bottom: 50px;
    ::v-deep img{
      width: 100%;
      height: 100%;
    }

  }

  .detail-container-with {
    margin-left: 100px;
    margin-right: 100px;
  }

  .content-title {
    font-size: 28px;
    font-weight: 600;
    color: #333333;
    display: flex;
    align-items: center;
    margin-bottom: 1px;
    margin-top: -10px;

    .content-name {
      margin-left: 17px;
      text-align: center;
      font-size: 28px;
      font-weight: 700;
    }
  }

  .content-details {
    font-family: 'Arial, sans-serif';
    margin: 0px 20px;
    .detail-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding: 5px 0;

      .detail-icon {
        font-size: 20px;
        margin-right: 10px;
        color: #81b3c7;
      }

      .detail-label {
        font-size: 16px;
        font-weight: 500;
        color: #666666;
        width: 120px;
      }

      .detail-value {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
      }
      .detail-value1{
        font-size: 22px;
        font-weight: 500;
        color: #f87a7a;
        margin-left: 10px;
      }
    }
  }
  .goods-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .gallery-list {
      flex-shrink: 0;
      margin-left: 5%;
      margin-right: -10px;
      width: 499px;
      height: 283px;
      margin-bottom: 67px;
      z-index: 1;

      ::v-deep .el-carousel__container {
        position: relative;
        height: 400px;
      }
    }

    .goods-right-content {
      background-color: white;
      padding: 10px;
      box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
      margin-left: 8px;
      height: 400px;
      width: 559px;
      margin-top: 50px;
      z-index: 2;
      .el-tag.el-tag--info {
        background-color: #81b3c7;
        border-color: #81b3c7;
        color: #f2f4f8;
        margin-left: 271px;
      }

      .custom-hr {
        margin-top: -20px;
        margin-bottom: -24px;
        border: 0;
        border-top: 1px solid #b1aaaa;
        width: 100%;
      }
      ::v-deep .el-button.is-circle {
        background: #81b3c7;
        border: 1px solid #81b3c7;
        margin-left: 15px;
      }

    }
  }

  .goods-content {
    margin-top: 13px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: 'Arial, sans-serif';
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    text-indent: 2em; /* 首行缩进两个字符 */
  }

  .attract-title {
    text-align: center;
    font-size: 25px;
    width: 100%;
  }

  .attract-title2 {
    margin-bottom: 3%;
    color: #8c8c8c;
    text-align: center;
    font-size: 17px;
    width: 100%;
  }

}
</style>
<script>
import api from '@/api';
import { extend } from '@/utils/extend';
export default {
    data() {
        return {
            loading: false,   // 加载
            isFavorite: false, // 是否已经收藏
            map: {
                number: '',
                name: '',
                attractions: '',
                kind: '',
                photo: '',
                price: '',
                introduction: '',
                addtime: '',
            },
        }
    },
    props: {
        id: {
            type: [String, Number],
            required: true
        }
    },
    watch: {
        id: {
            handler() {
                this.loadDetail();
            },
            immediate: true
        },
    },
    computed: {
    },
    methods: {
        loadDetail() {
            if (this.loading) return;
            this.loading = true;
            this.$get(api.food.webdetail, {
                id: this.id
            }).then(res => {
                this.loading = false;
                if (res.code == api.code.OK) {
                    extend(this, res.data);
                } else {
                    this.$message.error(res.msg);
                }
            }).catch(err => {
                this.loading = false;
                this.$message.error(err.message);
            });
        },

    },
    created() {
    },
    mounted() {
    },
    destroyed() {
    }
}
</script>